import Taro, { Component } from '@tarojs/taro';
import { View, Text, Block, Image, Button } from '@tarojs/components';
import { connect } from '@tarojs/redux';

@connect(({ loading }) => ({
  ...loading
}))
export default class Addresslist extends Component {
  constructor() {
    super(...arguments)
    // console.log(this.props)
    this.state = {
      // 左滑参数
      startX: 0,
      startY: 0,
      list: [
        {
          maskCellPhone: "158****5622",
          name: "lee",
          addrType: '公司',
          addr: '04路;04路区间;878路;879路环线江场三路汶水路(公交站)',
          isShowDelBtn: 0
        },
        {
          maskCellPhone: "158****5622",
          name: "lee",
          addrType: '公司',
          addr: '04路;04路区间;878路;879路环线江场三路汶水路(公交站)',
          isShowDelBtn: 0
        },
        {
          maskCellPhone: "158****5622",
          name: "lee",
          addrType: '公司',
          addr: '04路;04路区间;878路;879路环线江场三路汶水路(公交站)',
          isShowDelBtn: 0
        }
      ],
    }
  }

  config = {
    navigationBarTitleText: '',
  };

  async componentWillMount() {

  }


  componentDidMount() {

  };

  // 滑动开始
  onTouchStart(e) {

    // 记录初始位置
    let { clientX, clientY } = e.touches[0]
    this.setState({
      startX: clientX,
      startY: clientY
    })
  }

  // 滑动中
  onTouchMove(e) {
    let { clientX, clientY } = e.changedTouches[0],
      { startX, startY, list } = this.state,
      angle = this.thAngle({ X: startX, Y: startY }, { X: clientX, Y: clientY }),
      eindex = e.currentTarget.dataset.index

    // 滑动角度控制
    if (Math.abs(angle) > 30) return

    let listUpdata = list.map((item, index) => {
      item.isShowDelBtn = 0
      if (index === eindex) {
        item.isShowDelBtn = clientX > startX ? 0 : 1
      }
      return item
    })

    this.setState({
      list: listUpdata
    })

  }

  // 获取手势鼠标 相对水平X轴 与垂直Y轴 形成的角度
  thAngle(start, end) {
    let X = end.X - start.X,
      Y = end.Y - start.Y
    return 360 * Math.atan(Y / X) / (2 * Math.PI)
  }


  render() {

    let { isNetWrok, isNoAddress, list } = this.state

    return (
      <View className='addresslist'>
        {list.length &&
          list.map((item, index) => {
            return <View key={index} data-index={index} className={item.isShowDelBtn ? 'rt-move addresslist__item' : 'addresslist__item'} onTouchStart={this.onTouchStart} onTouchMove={this.onTouchMove}>
              <View className='addresslist-main'>
                <View className='addresslist-msg'>
                  <Text>{item.name} {item.maskCellPhone}</Text>
                  <View className='addresslist-address'>
                    <Text>[{item.addrType}]</Text> {item.addr}
                  </View>
                </View>
                <View className='addresslist-edit iconfont icon-bianji'></View>
              </View>
              <View className='addresslist-delete'>删除</View>
            </View>
          })
        }
      </View>
    )
  }
}
